import 'package:flutter/material.dart';

/**
 * 这个属性，算是真正的定位了，可以有多个
 * 
 * Stack的Positioned属性
 *    如果是超过两个组件的层叠该如何进行定位那?这就是我们加今天要学的主角Positioned组件了。这个组件也叫做层叠定位组件。
 * 
 * 
 * Positioned组件的属性
 * 
 * bottom: 距离层叠组件下边的距离
  left：距离层叠组件左边的距离
  top：距离层叠组件上边的距离
  right：距离层叠组件右边的距离
  width: 层叠定位组件的宽度
  height: 层叠定位组件的高度
 * 
 *  */

void main()=>runApp(myApp());

class myApp extends StatelessWidget{
  @override

  var positoned = new Stack(
    children: <Widget>[
      new CircleAvatar(
        backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
        radius: 100,
      ),
      new Positioned(
        top:0,
        left: 0,
        child: new Text('我是D飞'),
      ),
      new Positioned(
        right:0,
        bottom:0,
        child: new Container(
          height: 20,
          child: new Text('我在右下角噢'),
          color: Colors.red,
        ),
      )
    ],
  );

  Widget build(BuildContext context){
    return MaterialApp(
      title: '这个多任务名称',
      home:Scaffold(
        appBar: new AppBar(
          title: new Text('层叠布局高级用法'),
        ),
        // body:positoned
        body:Center(child: positoned,)
      )
    );
  }
}